@import '../../../asset/styles/util.less';

.wrapperBox {
  padding: 24px;
  .unAuthBox {
    padding: 60px 0;
    background-color: #fff;
    text-align: center;
    .unAuthTitle {
      margin-bottom: 60px;
      line-height: 1;
      font-size: 24px;
      color: #333;
    }
    .unAuthTip {
      margin-bottom: 60px;
      line-height: 1;
      font-size: 16px;
      color: #333;
    }
    .unAuthBtn {
      margin-bottom: 60px;
      width: 224px;
      height: 40px;
      background-color: #fff;
      border: 1px solid #ff8000;
      border-radius: 2px;
      font-size: 16px;
      color: #ff8000;
      outline: none;
      &:hover {
        background-color: #ff8000;
        color: #fff;
      }
    }
  }
  .authBox {
    .rowBox {
      margin-bottom: 20px;
      .accountSafetyBox,
      .accountInfoBox {
        box-sizing: border-box;
        height: 166px;
        padding: 20px;
        background-color: #fff;
      }
      .accountSafetyBox {
        .userAvatarBox {
          text-align: center;
          margin-bottom: 20px;
          .avatar {
            box-sizing: border-box;
            overflow: hidden;
            display: inline-block;
            width: 60px;
            height: 60px;
            border: 1px solid #e1e1e1;
            border-radius: 50%;
            img {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
      }
      .accountInfoBox {
        .transactionAccountBox {
          margin-bottom: 30px;
          text-align: center;
          .accountTitle {
            margin-bottom: 10px;
            line-height: 1;
            font-size: 16px;
            color: #333;
          }
          .transactionAmount {
            box-sizing: border-box;
            display: inline-block;
            width: 90px;
            height: 22px;
            border: 1px solid #e1e1e1;
            border-radius: 11px;
            line-height: 22px;
          }
        }
        .AccountLeftAmountBox {
          .amountItem {
            text-align: center;
            .amountTitle {
              margin-bottom: 15px;
              line-height: 1;
              color: #999;
            }
            .amountNumber {
              line-height: 1;
              font-size: 16px;
              color: #333;
            }
          }
          .centerItem {
            border: 1px solid #e1e1e1;
            border-top: none;
            border-bottom: none;
          }
        }
      }
      .quickEntryBox {
        .leftText {
          font-size: 16px;
          color: #333;
        }
        .rightText {
          cursor: pointer;
          color: #999;
          &:hover {
            color: #ff8000;
            text-decoration: underline;
          }
        }
        .toolsBox {
          box-sizing: border-box;
          .toolsItemBox {
            text-align: center;
            .item {
              cursor: pointer;
              display: inline-block;
              .icon {
                display: inline-block;
                width: 50px;
                height: 50px;
                margin-bottom: 10px;
                line-height: 50px;
                text-align: center;
                &:before {
                  display: inline-block;
                  width: 50px;
                  height: 50px;
                  font-size: 40px;
                }
              }
              .text {
                line-height: 1;
                font-size: 14px;
                color: #333;
              }
            }
          }
        }
      }
      .backlogBox {
        .refreshBtn {
          .refreshIcon {
            cursor: pointer;
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            &:before {
              display: inline-block;
              width: 18px;
              height: 18px;
              font-size: 18px;
              color: #ccc;
              &:hover {
                color: #ff8000;
              }
            }
          }
        }
        .backlogScrollBox {
          box-sizing: border-box;
          width: 100%;
          margin: 0;
          padding: 20px;
          li {
            margin-bottom: 25px;
            line-height: 1;
            font-size: 14px;
            .backlogNoticeText {
              float: left;
              color: #333;
            }
            .backlogHandleBtn {
              cursor: pointer;
              float: right;
              color: #ff8000;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
      .statisticsBox {
        .statisticsItemBox {
          box-sizing: border-box;
          cursor: pointer;
          padding: 30px;
          border-right: 1px solid #e1e1e1;
          .statisticsItemIcon {
            float: left;
            margin-right: 30px;
            .itemIcon {
              display: inline-block;
              width: 63px;
              height: 63px;
              line-height: 63px;
              text-align: center;
              &:before {
                display: inline-block;
                width: 63px;
                height: 63px;
                font-size: 50px;
              }
            }
          }
          .statisticsItemInfoBox {
            float: left;
            margin-right: 30px;
            .infoTitle {
              margin-bottom: 10px;
              line-height: 1;
              font-size: 14px;
              color: #333;
            }
            .infoNumber {
              margin-bottom: 10px;
              line-height: 1;
              font-size: 16px;
              color: #f00;
            }
            .infoHistoryNumber {
              line-height: 1;
              font-size: 12px;
              color: #999;
            }
          }
          .statisticsItemHandle {
            float: right;
            height: 100%;
            line-height: 63px;
            .handleIcon {
              display: inline-block;
              width: 14px;
              height: 22px;
              line-height: 22px;
              text-align: center;
              &:before {
                display: inline-block;
                width: 14px;
                height: 22px;
                font-size: 12px;
                color: #ccc;
              }
            }
          }
        }
        .lastItem {
          border: none;
        }
      }
    }
  }
}
